<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="2" style="text-align: right;">
						<p class="queryLabel">出库日期:</p>
					</el-col>
					<el-col :span="3">
						<el-date-picker v-model="data.firstStart" size="small" style="width:100%;" type="date" clearable placeholder="出库日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">至:</p>
					</el-col>
					<el-col :span="3">
						<el-date-picker v-model="data.firstStarts" size="small" style="width:100%;" type="date" clearable placeholder="出库日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">VIN:</p>
					</el-col>
					<el-col :span="3">
						<el-input placeholder="请输入VIN" size="small" style="width: 90%; margin-left: 15px;" v-model="carSelect.vin">
						</el-input>
					</el-col>
					<el-col :span="5" style="text-align: right;">
						<el-button type="primary" size="small" @click="query">查询</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border >
					<el-table-column type="selection" width="55" label="选择">
					</el-table-column>
					<el-table-column prop="outDate" label="出库时间" width="120">
					</el-table-column>
					<el-table-column prop="vin" label="VIN" width="180">
					</el-table-column>
					<el-table-column prop="carSeries" label="车系名称" width="150">
					</el-table-column>
					<el-table-column prop="carModel" label="车型名称" width="150">
					</el-table-column>
					<el-table-column prop="configure" label="配置名称" width="150">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import moment from 'moment'
	import carserice from '../../insPlugins/carSeries.vue'
	export default {
		data: function() {
			return {
				activeName: 'first',
				//待出库车辆列表
				tableDataCar: {
					total: 0,
					dataList: []
				},
				//车辆查询条件
				conditionCar: {
					type: "1" //出库类型
				},
				//暂估金额显示框
				editFormShow: false,
				//修改金额的form
				comFormDataPrice: {
					id: "",
					price: ""
				},
				//车系选择窗
				showStart: false,
				//查询条件-车型
				carModel: "",
				//日期
				data: {
					firstStart: "",
					firstStarts: ""
				},
				//调拨类型
				transferTypeCombo: [{
					label: '销售出库',
					value: '1'
				}, {
					label: '调拨出库',
					value: '2'
				}],
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				tableData: {
					total: 0,
					dataList: []
				},
				carStart: "",
				outTypeComboData: [{
					value: '1',
					label: '销售出库'
				}, {
					value: '0',
					label: '车辆调拨'
				}],
				//选中的列
				multipleSelection: [],
				//选中的列
				multipleSelections: [],
				carModelCode: "",
				//查询条件
				carSelect: {
					//出库时间
					outDateStart: "",
					//出库时间
					outDateStop: "",
					vin: "",
				},
				//车型名称
				carModelCode: "",
				//配置的下拉
				configCombo: [],
				//车型的下拉
				modelCombo: [],
				//配置的下拉
				statusCombo: [{
					value: '0',
					label: '未确认出库'
				}, {
					value: '1',
					label: '已确认出库'
				}],
				//车型名称
				carModelCodes: "",
				//配置的下拉
				configCombos: [],
				//车型的下拉
				modelCombos: [],
				//确认回库数据集
				confirmBackData: {
					id: [],
					aimWhereHouse: "",
					aimhouseDate: "",
				},
				//仓库下拉
				warehouseCombo: [],
				//warehouseComboCow: {},
				//仓库转换
				levelConvertData: {},
				addRule: {
					aimWhereHouse: [{
						required: true,
						message: '请选择入库仓库',
						trigger: 'blur'
					}],
					aimhouseDate: [{
						required: true,
						message: '请选择入库时间',
						trigger: 'blur',
						type: 'date'
					}]
				},
			}
		},
		methods: {
			saveDayin: function() {
				debugger;
				var outstr = document.getElementById("printHtml").innerHTML;
				var printWindow = window.open();
				printWindow.document.body.innerHTML = outstr;
				printWindow.print();
				printWindow.close();
				this.$data.dayinFormShow = false;
			},
			showdialog: function() {

				this.$data.dayinFormShow = true;

			},
			//查询选择的车辆
			carQuery: function() {

				this.$http.get(this.API_ROOT + '/scm/out/notOut', {
					params: {
						type: this.$data.conditionCar.type
					}
				}).then(resp => {
					debugger;
					this.$data.tableDataCar.dataList = resp.data;
				}, resp => {});
				debugger;
			},
			//根据金额提示表格颜色
			tableRowClassName(row, index) {
				debugger;
				if(row.estimateBackDate > 0) {
					return ''
				} else {
					if(row.estimateBackDate < this.moment(new Date().toISOString()).format("YYYY-MM-DD")) {
						return 'day-row';
					}
					return '';
				}

			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//接收仓库代码与名称转换
			aimWarehouseCov: function(row) {
				return this.$data.levelConvertData[row.aimWarehouse];
			},
			
			//查询
			query: function() {
				//debugger;
				this.$data.carSelect.outDateStart = this.momentFu(this.$data.data.firstStart);
				this.$data.carSelect.outDateStop = this.momentFu(this.$data.data.firstStarts);
				this.$http.post(this.API_ROOT + '/scm/saleOrder/outPageCar', this.$data.carSelect, {
					params: {
						//root: window.localStorage.getItem("companyId"),
						//status: this.$data.queryStatus,
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;

					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
				debugger;
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},

		},
		components: {
			carserice
		},
		created: function() {
			this.query();
		}
	}
</script>

<style>
	.el-table .day-row {
		background: #FF4949;
	}
</style>